<template>
    <div>
        <ul>
            <li v-for="(item, index) in back.data" :key="index" @click="dianji(item.id)">
                <!-- <img :src="item.img" alt=""> -->
                <div>
                    <img :src="item.img" alt="" class="img">
                    </img>
                </div>
                <p class="ps">{{ item.name }}</p>
                <!-- <p>{{ item.img }}</p> -->
            </li>
        </ul>
    </div>
</template>

<script setup>
const users = [
{
      id: 110,
      name: '徐帅',
      img: "https://img1.baidu.com/it/u=193696007,2125345610&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1724173200&t=a7a4494fa9f83a5b8e97ea56679789ef"
    },
    {
      id: 111,
      name: '李四',
      img: "https://img1.baidu.com/it/u=193696007,2125345610&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1724173200&t=a7a4494fa9f83a5b8e97ea56679789ef"
    },
    {
      id: 112,
      name: '王五',
      img: "https://img1.baidu.com/it/u=187585967,3882185192&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1724173200&t=6ab34d26ee4d96932396758b6352f7e5"
    },
    {
      id: 113,
      name: '赵六',
      img: "https://img1.baidu.com/it/u=187585967,3882185192&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1724173200&t=6ab34d26ee4d96932396758b6352f7e5"
    }
]
import { useRouter } from "vue-router"
const router = useRouter()
import { ref, onMounted, reactive } from "vue"
// import { getdata } from "../../API/api"
const back = reactive({
    data: []
})

// console.log(back.data)
// const getdatas = async () => {
//     const res = await getdata()
//     back.data = res
//     console.log(back.data)
//     console.log(res)
// }
onMounted(() => {
    // getdatas()

    back.data = users
})

const dianji = (id) => {
    const res = back.data.find(item => item.id == id)
    // localStorage.setItem('res', res)
    // console.log(res)
    router.push({
        path: '/chat',
        query: res
    })

}
</script>

<style scoped>
.img {
    width: 50px;
    height: 50px;
    border: 1px solid red;
    border-radius: 50%;
    /* margin-left: 5px; */
}

ul li {
    display: flex;
    /* justify-content: scoped-around; */
    padding: 10px;
    align-items: center
}

.ps {
    /* margin-right:10px;  */
    padding: 10px;

}
</style>